import ArkDotStatus from '../ark-dot-status/ArkDotStatus.vue';

export default {
  title: 'base-component-v1/ArkDotStatus',
  component: ArkDotStatus,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、tailwindcss</span> 使用`
      }
    }
  },
  argTypes: {
    color: {
      description: `预设点颜色`,
      control: 'select',
      options: ['red', 'orange', 'green', 'blue', 'gray']
    },
    customColor: {
      description: '自定义点颜色',
      control: {type: 'color'}
    },
    animate: {description: '点动画'},
    desc: {description: '状态描述'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkDotStatus},
    setup() {
      return {args};
    },
    template: '<ArkDotStatus v-bind="args"/>',
  }),
  args: {
    color: 'red',
    animate: true,
    desc: '状态'
  },
};